<template>
  <div class="container">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 30px"
    >
      <el-breadcrumb-item :to="{ path: '/comment' }"
        >评论管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ $route.query.editTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="commentForm"
      :rules="rules"
      ref="commentForm"
      label-width="200px"
      class="demo-ruleForm"
      :inline="true"
    >
      <el-form-item label="文章 ID" prop="essayId">
        <el-input
          v-model="commentForm.essayId"
          style="width: 300px"
          placeholder="所属于哪篇文章"
        ></el-input>
      </el-form-item>
      <el-form-item label="主评论 ID" prop="replyId">
        <el-input
          v-model="commentForm.replyId"
          style="width: 300px"
          placeholder="所属于哪条主评论"
        ></el-input>
      </el-form-item>
      <el-form-item label="评论类型" prop="cmtType">
        <el-select
          v-model="commentForm.cmtType"
          placeholder="请选择评论类别"
          default-first-option
          style="width: 300px"
        >
          <el-option label="评论" value="评论"></el-option>
          <el-option label="回复" value="回复"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评论内容" prop="replyId">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="请输入内容"
          v-model="commentForm.cmtContent"
          style="width: 810px;"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="addBtn" style="text-align: center">
      <el-button type="primary" plain @click="resetForm('commentForm')"
        >重置</el-button
      >
      <el-button type="primary" @click="submitForm('commentForm')"
        >发布</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    commentForm: {
      cmtId: "",
      userId: "",
      replyId: "",
      essayId: "",
      cmtType: "",
      cmtContent: "评论正文",
    },
    rules: {
      essayId: [
        { required: true, message: "请输入文章ID", trigger: "blur" },
      ],
      cmtType: [
        { required: true, message: "请选择评论类型", trigger: "change" },
      ],
      content: [
        { required: true, message: "请输入评论内容", trigger: "blur" },
        {
          min: 2,
          max: 200,
          message: "长度在 2 到 200 个字符",
          trigger: "blur",
        },
      ],
    },
  }),
  mounted() {
    // this.commentForm = this.$getSessionStorage("comment");
    this.commentForm.userId = 1;  // 待修改
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.editTitle == "编辑评论") {
            this.onUpdate();
          } else {
            this.onAddData();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onAddData() {
      this.$axios
        .post("comment/insertComment", {
          userId: this.commentForm.userId,
          replyId: this.commentForm.replyId,
          essayId: this.commentForm.essayId,
          cmtType: this.commentForm.cmtType,
          cmtContent: this.commentForm.cmtContent,
        })
        .then((result) => {
          if (result.data == 1) {
            // 添加数据后刷新数据
            this.$router.push("/comment");
            this.$message({
              showClose: true,
              message: "添加成功！",
              type: "success",
            });
          }
        })
        .catch((err) => {
          alert(err);
        });
    },
    // onUpdate() {
    //   this.$axios
    //     .post("comment/updateCommentById", {
    //       cmtId: this.commentForm.cmtId,
    //       replyId: this.commentForm.replyId,
    //       essayId: this.commentForm.essayId,
    //       cmtType: this.commentForm.cmtType,
    //       cmtContent: this.commentForm.cmtContent,
    //     })
    //     .then((result) => {
    //       if (result.data == 1) {
    //         // 编辑数据后刷新数据
    //         this.$router.push("/comment");
    //         this.$removeSessionStorage("comment");
    //       }
    //     })
    //     .then(() => {
    //       this.$message({
    //         showClose: true,
    //         message: "更新成功！",
    //         type: "success",
    //       });
    //     })
    //     .catch((err) => {
    //       alert(err);
    //     });
    // },
  },
};
</script>